<template>
  <div class="home">
    <div class="top" :class="{'have-top' : haveQRCode && balanceStatus, 'no-balance': !balanceStatus}">
      <div class="top-title" @click="show = true">公交服务·{{selectCity.cityName}}<i class="iconfont">&#xe653;</i></div>
      <!-- 二维码相关 开始 -->
      <div class="box">
        <!-- 切换二维码类型 开始 -->
        <div class="tab" v-if="haveTab">
          <div class="tab-item" :class="{active:isBusCard}" @click.stop="busCardTab(true)">公交卡乘车</div>
          <div class="tab-item" :class="{active:!isBusCard}" @click.stop="busCardTab(false)">银行卡乘车</div>
        </div>
        <!-- 切换二维码类型 结束 -->

        <!--免费乘公交-->
        <div class="gratis" v-if="false">
          <!--未开通-->
          <div class="credit-card" v-if="!wallet.open">
            <div class="credit-card-text">开通钱包<em>免费</em>乘公交</div>
            <div class="button button-white">
              <button @click="openUrl(wallet.url)">立即开通</button>
            </div>
          </div>
          <!--未开通-->

          <!--已开通-->
          <div class="credit-card" :class="{'have-lc': carMasterStatus}" v-if="wallet.open">
            <div class="credit-card-text">今日剩余免费乘车次数：<em>{{wallet.freeCount}}</em></div>
            <!--等绑定驾照功能-->
            <div class="button button-white" v-if="false">
              <button>获取免费次数</button>
            </div>
            <img class="lc" src="../assets/images/home/LC.png" v-if="carMasterStatus"/>
          </div>
          <!--已开通-->
        </div>
        <!--免费乘公交-->

        <!-- 二维码内容 开始 -->
        <div :class="[haveTab ? 'have-tab':'no-tab']">
          <div class="qr-code" v-if="haveQRCode && balanceStatus">
            <div class="qr-text">对准公交<em>蓝色扫码器</em>刷码乘车</div>
            <img :src="codeImg" @click="codeImgShow"/>
            <!--<div class="qr-tips" v-if="false">二维码会自动<a class="blue" @click.stop.stop="refresh()">刷新</a></div>-->
            <div class="qr-tips">二维码每40秒自动刷新</div>
          </div>
          <div class="not-code" v-else>
            <img src="../assets/images/home/not-code.png"/>
            <div class="title">{{notCodeData.title}}</div>
            <template v-if="balanceStatus">
              <div class="subtitle">{{notCodeData.text1}}<br/>{{notCodeData.text2}}</div>
              <div class="button">
                <button @click.stop="operation(notCodeData.code)">{{notCodeData.buttonText}}</button>
              </div>
            </template>
            <template v-else>
              <div class="subtitle">{{notCodeData.text1}}<br/>{{notCodeData.code === 10005 ? '后再' : (notCodeData.code
                === 0 ? '' : '')}}
                <span class="refresh" @click.stop="getBalance()"
                      v-if="notCodeData.code === 0">{{notCodeData.text2}}</span>
                <span class="refresh" @click.stop="refresh()" v-else>{{notCodeData.text2}}</span>
                {{notCodeData.text3}}
              </div>
              <div class="button" v-if="notCodeData.code === 10005">
                <button @click.stop="operation(notCodeData.code)">{{notCodeData.buttonText}}</button>
              </div>

              <div class="button" v-if="notCodeData.code === 0">
                <button @click.stop="getBalance()">刷新</button>
              </div>
            </template>
          </div>
          <div class="balance-div" v-if="haveQRCode">
            <span
              :class="{'balance-0': !balance}">公交卡余额（¥{{balance ? balance: (Number(balance) === 0 ? '0.0' : '--')}}）</span>
            <div class="button">
              <button @click.stop="recharge()">充值</button>
            </div>
          </div>
          <router-link tag="a"
                       class="balance-record"
                       :to="{name: 'rechargeRecords'}"
                       v-if="haveQRCode">
            <span>充值/乘车记录</span>
            <i class="iconfont">&#xe651;</i>
          </router-link>
        </div>
        <!-- 二维码内容 结束 -->
      </div>
    </div>
    <!-- 主页面内容 开始 -->
    <div class="main" v-if="haveQRCode">
      <!-- 中心提示条 开始 -->
      <router-link tag="div" :to="{name: 'notice'}" v-if="false" class="tips">
        <img src="../assets/images/home/bus-tips.png"/>
        <div class="tips-text one-line-hide">{{getNewsText}}</div>
      </router-link>
      <!-- 中心提示条 结束 -->

      <swiper
        v-if="false"
        :list="[{imgPath: require('../assets/images/home/banner.png'), openLink: 'https://dcb-cdn.oss-cn-beijing.aliyuncs.com/web/ixc/freebus.html'}]"></swiper>

      <!-- 功能选项 开始 -->
      <div v-if="false" class="item-box">
        <div class="item" @click="liveBus()">
          <div class="item-main">
            <img src="../assets/images/home/bus-icon1.png"/>
            <div class="item-inner">
              <div class="item-title">实时公交</div>
              <div class="item-subtitle">不怕错过公交了</div>
            </div>
          </div>
          <i class="iconfont">&#xe651;</i>
        </div>
        <div class="item" @click.stop="byBus()">
          <div class="item-main">
            <img src="../assets/images/home/bus-icon2.png"/>
            <div class="item-inner">
              <div class="item-title">公交换乘查询</div>
              <div class="item-subtitle">换乘公交线路查询</div>
            </div>
          </div>
          <i class="iconfont">&#xe651;</i>
        </div>
        <router-link tag="div" :to="{name: 'lostFind'}" class="item">
          <div class="item-main">
            <img src="../assets/images/home/icon1.png"/>
            <div class="item-inner">
              <div class="item-title">失物招领</div>
              <div class="item-subtitle">东西落了这里找</div>
            </div>
          </div>
          <i class="iconfont">&#xe651;</i>
        </router-link>
      </div>
      <div class="action">
        <a class="bus-station" @click="byBus()">
          <img src="../assets/images/home/bus-icon2.png"/>
          <span>公交路线查询</span>
        </a>
        <router-link tag="a" class="lost-property" :to="{name: 'lostFind'}">
          <img src="../assets/images/home/icon1.png"/>
          <span>失物招领</span>
        </router-link>
      </div>
      <!--附近公交站 开始-->
      <div class="nearby-bus-site">
        <div class="site-title">
          <div class="left">
            <img src="../assets/images/home/busSite.png"/>
            <span>附近公交站</span>
          </div>
          <a class="right" @click="moreSite()">
            <span>查询更多站点线路</span>
            <i class="iconfont">&#xe651;</i>
          </a>
        </div>
        <template v-if="loading && isVisit">
          <van-skeleton
            v-for="item in 3"
            :key="item"
            title
            :row="1"
          >
          </van-skeleton>
        </template>
        <template v-else>
          <ul class="site-list" v-if="siteList.length">
            <li class="path"  @click="goBusDetails(item.station_name)"
                         v-for="(item,index) in siteList.slice(0, 3)" :key="index">
              <div class="path-head">
                <span class="path-head-title">{{item.station_name}}</span>
                <span class="path-head-dsc">{{item.distance}}</span>
              </div>
              <div class="path-content one-line-hide">
                <span class="path-content-item" v-for="it in item.items.slice(0, 4)">{{it.line_name}}</span>
                <span v-if="item.items && item.items.length > 4">...</span>
              </div>
            </li>
          </ul>
          <Nodata v-else :msg="siteMsg"></Nodata>
          <div v-if="!siteList.length && !isVisit" class="button">
            <button @click="openLocation">打开定位</button>
          </div>
        </template>
      </div>
      <!--附近公交站 结束-->
      <!-- 功能选项 结束 -->
    </div>
    <!-- 主页面内容 结束 -->
    <div class="bottom">
      <p>许昌市交通局和许昌市公交公司提供服务<br/>许昌市市民云政务信息技术有限公司提供技术支持</p>
    </div>
    <picker :columns="columns" v-model="show" @onConfirm="onConfirm"></picker>
    <van-image-preview
      v-model="showPreview"
      :images="[codeImg]"
    >
    </van-image-preview>
  </div>
</template>
<!-- 扫码乘车页面 -->
<script>
  import Picker from '../components/picker/index';
  import Swiper from '../components/swiper/'
  import Nodata from '../components/no-data/index';

  export default {
    name: 'home',

    components: {
      Picker,
      Swiper,
      Nodata
    },

    data () {
      return {
        siteMsg: '未获取到您的位置信息',
        loading: true,
        isVisit: false,
        siteList: [],
        showPreview: false,
        getNewsText: '新闻',
        show: false,
        balance: 0, // 余额
        balanceStatus: true, // false 表示 余额不足
        columns: [],
        selectCity: {},
        codeImg: '',
        notCodeData: {
          title: '网络异常',
          text1: '您的网络可能有问题',
          text2: '请重新刷新',
          buttonText: '重试',
          code: 1004
        },
        timeNum: 40, // 刷新时间s
        refreshCodeTime: 40, // 需要刷新的时间 s
        refreshCodeTimeId: '', // 二维码的刷新id
        // 是否有切换公交卡的选项
        haveTab: false,
        // 是否展示二维码
        haveQRCode: false,
        // 判断当前是否的公交卡，否则展示银行卡扫码
        isBusCard: true,
        cardInfo: {},
        oldBrightness: '', // 屏幕初始亮度
        manualOperationRefresh: false, // 手动刷新
        carMasterStatus: false,
        // 钱包信息
        wallet: {
          // 是否开通
          open: false,
          // 免费次数
          freeCount: 0,
          // 未开通跳转地址
          url: ''
        },
        getAppInfo: ''
      }
    },

    beforeDestroy () {
      window['viewDidAppear'] = () => {
      }
      this.close()
    },

    destroyed () {
      console.log('destroyed')
      this.close()
    },

    mounted () {
      let columns = [{'id': '1', 'cityCode': 'HNXCC0', 'cityName': '许昌市区', 'districtCode': '411002'}, {
        'id': '3',
        'cityCode': 'HNXCYL',
        'cityName': '鄢陵县',
        'districtCode': '411024'
      }, {'id': '4', 'cityCode': 'HNXCXI', 'cityName': '襄城县', 'districtCode': '411025'}, {
        'id': '5',
        'cityCode': 'HNXCYZ',
        'cityName': '禹州市',
        'districtCode': '411081'
      }, {'id': '6', 'cityCode': 'HNXCCG', 'cityName': '长葛市', 'districtCode': '411082'}]
      this.columns = columns.map(item => {
        item.text = item.cityName
        return item
      })
      this.$load.show({
        mask: true
      })
      postMessage({
        'model': 'location'
      })
      let _this = this
      window['receiveAppMessage'] = msg => {
        if (this.isIos() && msg.model === 'location') {
          window.userPoiInfo = msg.params
          let data = {
            lng: window.userPoiInfo.longitude,
            lat: window.userPoiInfo.latitude
          }
          _this.getStationInfo(data)
        }
        if (!this.isIos() && msg.model === 'location') {
          window.userPoiInfo = msg
          let data = {
            lng: window.userPoiInfo.longitude,
            lat: window.userPoiInfo.latitude
          }
          _this.getStationInfo(data)
        }
      }

      setTimeout(() => {
        try {
          this.getAppInfo = JSON.parse(getAppInfo())
          this.columns.map(item => {
            if (item.cityName.indexOf(this.getAppInfo.service_district_name) !== -1) {
              this.selectCity = item
            }
          })
          if ('魏都区'.indexOf(this.getAppInfo.service_district_name) !== -1 || '建安区'.indexOf(this.getAppInfo.service_district_name) !== -1) {
            this.selectCity = {
              'id': '1',
              'cityCode': 'HNXCC0',
              text: '许昌市区',
              'cityName': '许昌市区',
              'districtCode': '411002'
            }
          }
        } catch (e) {
          this.selectCity = {
            'id': '1',
            'cityCode': 'HNXCC0',
            text: '许昌市区',
            'cityName': '许昌市区',
            'districtCode': '411002'
          }
        }
        try {
          if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
            this.oldBrightness = DCBApp.getBrightness() // 获取当前亮度
            DCBApp.setBrightness(100)
          }
        } catch (e) {
          console.log('获取DCBApp失败')
        }
        this.pullQrCode()
        this.fetchData()
        // this.isOpenAndCount()
        this.isCarMaster()
      }, 1000)
      window['viewDidAppear'] = () => {
        if (this.$route.name === 'home') {
          clearInterval(this.refreshCodeTimeId)
          this.pullQrCode()
          this.fetchData()
          // this.isOpenAndCount()
          this.isCarMaster()
          postMessage({
            'model': 'location'
          })
          if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
            try {
              DCBApp.setBrightness(100)
            } catch (e) {
            }
          }
        }
      }
      window['nativeBack'] = () => {
        if (this.$route.name === 'home') {
          if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
            try {
              DCBApp.setBrightness(this.oldBrightness)
            } catch (e) {
            }
          }
        }
      }
    },

    watch: {
      selectCity (v) {
        if (v.id !== '1') {
          this.constructionIng()
        }
      },
      $route (to, from) {
        if (from.name === 'home') {
          if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
            try {
              DCBApp.setBrightness(this.oldBrightness)
            } catch (e) {
            }
          }
        }
        if (to.name === 'home') {
          if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
            try {
              DCBApp.setBrightness(100)
            } catch (e) {
            }
          }
        }
        console.log(to, from)
      },
      timeNum (v) {
        if (v === this.refreshCodeTime) {
          this.pullQrCode()
          this.fetchData()
        }
      }
    },

    methods: {
      openLocation () {
        postMessage({
          'model': 'location'
        })
      },
      moreSite () {
        if (!window.userPoiInfo) {
          postMessage({
            'model': 'location'
          })
          return
        }
        this.openUrl(`https://h5-xuchang.duocairen.com/publicTransportation/view/search?isLogin=true&isAuth=true&longitude=${window.userPoiInfo.longitude}&latitude=${window.userPoiInfo.latitude}`)
      },
      goBusDetails (stationName) {
        this.openUrl(`https://h5-xuchang.duocairen.com/publicTransportation/view/busDetails?isLogin=true&isAuth=true&stationName=${stationName}&longitude=${window.userPoiInfo.longitude}&latitude=${window.userPoiInfo.latitude}`)
      },
      // 附近公交站点
      getStationInfo (data) {
        this.loading = false
        this.isVisit = true
        this.$http.post('/api/qrCode/getStationInfo', data).then(res => {
          console.log(res)
          this.siteMsg = '暂未查询到附近的公交站'
          if (res.status === 200) {
            this.siteList = res.data
          }
        }).catch(() => {
          this.siteMsg = '暂未查询到附近的公交站'
        })
      },
      // 是否是车主
      isCarMaster () {
        this.$http.get('/api/qrCode/isCarMaster').then(res => {
          if (res.status === 200) {
            this.carMasterStatus = res.data
          }
        })
      },
      // 是否开通钱包 并且有免费次数
      isOpenAndCount () {
        this.$http.get('/api/qrCode/isOpenAndCount').then(res => {
          if (res.status === 200) {
            this.wallet = res.data
          }
        })
      },
      codeImgShow () {
        this.showPreview = true
      },
      close () {
        console.log(this.isIos())
        if ((this.isIos() && Number(this.appVersions()) > 2019121002) || !this.isIos()) {
          try {
            DCBApp.setBrightness(this.oldBrightness)
          } catch (e) {
          }
        }
      },

      liveBus () {
        this.openUrl('https://h5-xuchang.duocairen.com/publicTransportation/view/realTimeBus?isLogin=true&isAuth=true')
      },

      byBus () {
        this.openUrl('https://h5-xuchang.duocairen.com/publicTransportation/view/course?isLogin=true&isAuth=true')
      },

      // 刷新
      refresh () {
        if (!this.manualOperationRefresh) { // 没有手动刷新过
          clearInterval(this.refreshCodeTimeId)
          this.timeNum = this.refreshCodeTime - 1
          this.manualOperationRefresh = true
          let timeMs = this.refreshCodeTime * 1000
          setTimeout(() => { // 手动刷新过后x秒后 才能再次手动刷新
            this.manualOperationRefresh = false
          }, timeMs)
          this.$load.show('刷新中...')
          this.pullQrCode()
          // this.isOpenAndCount()
          this.fetchData()
        } else {
          this.$toast.show('请勿频繁刷新')
        }
      },
      // 获取二维码
      pullQrCode () {
        this.$http.post('/api/qrCode/pullQrCode').then(res => {
          if (res.status === 200) {
            this.haveQRCode = true
            this.codeImg = res.data.qrInfo
            this.cardInfo = res.data.cardInfo
            this.getBalance()
            clearInterval(this.refreshCodeTimeId)
            this.refreshCodeTimeId = setInterval(() => {
              this.timeNum -= 1
              if (this.timeNum <= 0) {
                this.timeNum = this.refreshCodeTime
                clearInterval(this.refreshCodeTimeId)
              }
            }, 1000)
            return
          } else if (res.status === 1007) { // 用户还未开通扫描乘车功能
            this.notCodeData = {
              title: '公交卡开卡失败',
              text1: '当前网络状况不稳定导致公交卡开卡失败',
              text2: '请重新开卡',
              buttonText: '重新开卡',
              code: 1007
            }
          } else if (res.status === 1006) { // 用户未实名
            this.notCodeData = {
              title: '需实名认证',
              text1: '使用此服务需满足公交服务实名制要求',
              text2: '请认证身份',
              buttonText: '实名认证',
              code: 1006
            }
          } else if (res.status === 10005) { // 余额不足
            this.cardInfo = res.data.cardInfo
            this.getBalance(true)
            this.balanceStatus = false
            this.haveQRCode = true
            this.notCodeData = {
              title: '余额不足',
              text1: '您的公交卡余额不足1元,请充值',
              text2: ' 刷新 ',
              text3: '获取乘车二维码',
              buttonText: '去充值',
              code: 10005
            }
            this.$load.hide()
            return
          }
          this.$load.hide()
        }).catch(() => {
          this.$toast.show('获取乘车码失败，请重新尝试')
          this.$load.hide()
        })
      },

      // 获取公告列表
      fetchData () {
        this.$http.post('/api/qrCode/getNewsList').then(res => {
          if (res.status === 200) {
            this.getNewsText = res.data[0].title
          } else {
            console.log(res.msg)
            // this.$toast.show(res.msg)
          }
        })
      },

      // 获取余额
      getBalance (status) {
        this.$http.post('/api/qrCode/getBalance').then(res => {
          if (res.status === 200) {
            this.balance = res.data.balance
            if (this.balance < 0) {
              this.balanceStatus = false
              this.notCodeData = {
                title: '余额不足',
                text1: '您的公交卡余额不足1元,请充值',
                text2: ' 刷新 ',
                text3: '获取乘车二维码',
                buttonText: '去充值',
                code: 10005
              }
              this.$load.hide()
              return
            }
            if (!status) { // 余额充足
              this.balanceStatus = true
            }
          } else {
            this.balanceStatus = false
            this.notCodeData = {
              title: '二维码获取失败',
              text1: '公交卡信息获取失败，请刷新重试',
              text2: '',
              buttonText: '刷新',
              code: 0
            }
          }
          this.$load.hide()
        })
      },
      activateCard () {
        this.$load.show({
          mask: true
        })
        this.$http.post('/api/qrCode/activateCard').then(res => {
          this.$load.hide()
          if (res.status === 200) {
            this.pullQrCode();
          } else {
            // this.$toast.show(res.msg);
            console.log(res.msg)
          }
        })
      },
      recharge () {
        this.$router.push({
          name: 'recharge',
          params: {cardInfo: this.cardInfo, balance: this.balance}
        })
      },
      operation (code) {
        if (code === 1007) {
          this.activateCard();
          return;
        }
        if (code === 1004) {
          this.pullQrCode();
        }
        if (code === 10005) {
          this.recharge();
        }
      },
      /**
       * 切换公交卡或银行卡
       * @param value
       */
      busCardTab (value) {
        this.isBusCard = value
      },
      constructionIng () {
        clearInterval(this.refreshCodeTimeId)
        this.timeNum = this.refreshCodeTime - 1
        this.haveQRCode = false
        this.balanceStatus = false
        this.notCodeData = {
          title: '暂只开通“许昌市区”',
          text1: this.selectCity.text + '扫码乘车功能正在努力建设中',
          text3: '敬请期待~',
          buttonText: '',
          code: 1000
        }
      },
      onConfirm (v) {
        if (this.selectCity.id === v.id) {
          return
        }
        this.selectCity = v
        if (v.id !== '1') {
          this.constructionIng()
        } else {
          this.$load.show('切换中...')
          this.pullQrCode()
          this.fetchData()
          // this.isOpenAndCount()
          this.isCarMaster()
        }
        console.log(v)
      }
    }
  }
</script>

<style lang="scss">
  @import "~styles/extends";

  .van-image-preview {
    background: $theme-white !important;
    .van-image-preview__image {
      padding: 0 16px;
    }
  }

  .home {
    display: flex;
    flex-direction: column;
    .refresh {
      color: $theme-blue;
    }
    .top-title {
      width: 100%;
      text-align: center;
      padding: 20px 0;
      font-size: 18px;
      font-family: PingFangSC-Semibold;
      font-weight: bold;
      color: $theme-white;
      line-height: 25px;

      i {
        margin-left: 4px;
      }
    }

    .top {
      flex: 1;
      background: url("../assets/images/home/top-background.png") no-repeat;
      background-size: 100% 226px;
      padding: 0 20px;
      margin-bottom: 83px;

      .box {
        width: 100%;
        box-shadow: 0 2px 8px 0 rgba(126, 150, 199, 0.16);
        border-radius: 8px;
        background: $theme-white;

        .tab {
          display: flex;

          &-item {
            width: 50%;
            text-align: center;
            height: 42px;
            background: #F9F9F9;
            color: $theme-gray;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            line-height: 42px;
            border-radius: 8px 8px 0 0;
          }

          .active {
            color: $theme-black;
            background: $theme-white;
            position: relative;
            font-weight: bold;

            &:after {
              content: '';
              position: absolute;
              width: 32px;
              height: 2px;
              bottom: 2px;
              left: 0;
              right: 0;
              margin-left: auto;
              margin-right: auto;
              background: $theme-blue;
            }
          }
        }

        .gratis {
          .credit-card {
            padding: 12px 16px;
            background: rgba(247, 250, 255, 1);
            border-radius: 8px 8px 0 0;
            @extend %flex-justify-between;
            align-items: center;
            &-text {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 20px;
              em {
                color: #E71110;
              }
            }
            .lc {
              width: 46px;
              height: 40px;
            }
            .button {
              font-size: 12px;
              button {
                border-radius: 12px;
                padding: 3px 10px;
                line-height: normal;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
              }
            }
          }
          .have-lc {
            padding: 4px 16px;
          }
        }

        .have-tab {
          padding: 20px 0;
        }

        .qr-code {
          height: 266px;
          padding: 20px 0;
          overflow: hidden;

          .qr-text {
            position: relative;
            z-index: 88;
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: $theme-black;
            line-height: 22px;
            em {
              color: $theme-blue;
            }
          }

          img {
            position: relative;
            z-index: 2;
            display: block;
            margin: -8px auto -8px;
            width: 210px;
            height: 210px;
          }

          .qr-tips {
            position: relative;
            z-index: 88;
            width: 100%;
            text-align: center;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: $theme-gray;
            line-height: 20px;

            .blue {
              color: $theme-blue;
            }
          }
        }

        .balance-div {
          margin: 16px 16px 0;
          padding: 14px 0 16px;
          border-top: 1px solid $theme-border-color;
          @extend %flex-justify-between;
          align-items: center;
          span {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 22px;
          }
          .balance-0 {
            color: $theme-gray;
          }
          .button {
            font-size: 14px;
            button {
              font-family: PingFangSC-Regular, PingFang SC;
              font-size: 14px;
              font-weight: 400;
              padding: 3px 16px;
              line-height: 20px;
            }
          }
        }

        .balance-record{
          @extend %flex-justify-center-between;
          border-top: 1px solid #EFEFF0;
          padding: 16px 0;
          margin: 0 16px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #353D4E;
          line-height: 22px;
        }

        .not-code {
          height: 293px;
          display: flex;
          flex-flow: column;
          justify-content: center;

          img {
            display: block;
            margin: 0 auto;
            width: 60px;
            height: 60px;
          }

          .title {
            width: 100%;
            text-align: center;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: $theme-black;
            line-height: 25px;
            margin: 16px 0 8px;
          }

          .subtitle {
            width: 100%;
            text-align: center;
            height: 40px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(167, 174, 188, 1);
            line-height: 20px;
          }

          .button {
            padding: 32px 76px 0;
          }
        }
      }
    }

    .have-top, .no-balance {
      margin-bottom: 20px;
    }

    .main {
      padding: 0 16px 20px;

      .swiper-container {
        margin-bottom: 16px;
        img {
          height: 90px;
          border-radius: 8px;
        }
      }

      .tips {
        height: 40px;
        background: rgba(255, 250, 240, 1);
        border-radius: 20px;
        padding: 10px 16px;
        display: flex;
        align-items: center;

        img {
          width: 68px;
          height: 16px;
        }

        &-text {
          margin-left: 12px;
          padding-left: 12px;
          border-left: 1px solid #FFB836;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-black;
          line-height: 20px;
        }
      }

      .card {
        width: 100%;
        background: rgba(250, 252, 255, 1);
        border-radius: 8px;
        padding: 16px;
        margin: 20px 0;

        &-title {
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-black;
          line-height: 22px;
        }

        &-main {
          margin: 4px 0;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .balance {
            height: 40px;
            font-size: 28px;
            font-family: PingFangSC-Medium;
            font-weight: bold;
            color: $theme-blue;
            line-height: 40px;
          }

          .recharge {
            padding: 5px 16px;
            border-radius: 4px;
            border: 1px solid rgba(73, 129, 238, 1);
            background: rgba(255, 255, 255, 0);
            color: $theme-blue;
            line-height: normal;
            font-size: 12px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
          }
        }

        &-number {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: $theme-gray;
          line-height: 17px;
        }

        &-button {
          padding: 12px 8px 0;
        }
      }

      .item-box {
        margin-top: 12px;
        padding-left: 16px;
        border-radius: 8px;
        border: 1px solid $theme-border-color;

        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 16px 16px 0;
          border-bottom: 1px solid $theme-border-color;

          &:last-child {
            border: none;
          }

          &-main {
            display: flex;

            img {
              width: 40px;
              height: 40px;
            }

            .item-inner {
              margin-left: 12px;

              .item-title {
                height: 22px;
                font-size: 16px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: $theme-black;
                line-height: 22px;
              }

              .item-subtitle {
                margin-top: 4px;
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: $theme-gray;
                line-height: 17px;
              }
            }
          }

          i {
            font-size: 16px;
          }
        }
      }
      .action {
        margin-bottom: 16px;
        @extend %flex-justify-between;
        .bus-station, .lost-property {
          width: 164px;
          padding: 16px;
          text-align: center;
          border-radius: 8px;
          border: 1px solid rgba(239, 239, 240, 1);
          @extend %flex;
          align-items: center;
          img {
            width: 28px;
            height: 28px;
            margin-right: 4px;
          }
          span {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(53, 61, 78, 1);
          }
        }
      }
      .nearby-bus-site {
        padding: 16px 0 16px 16px;
        border-radius: 8px;
        border: 1px solid rgba(239, 239, 240, 1);
        .site-title {
          @extend %flex-justify-between;
          padding: 0 16px 16px 0;
          border-bottom: 1px solid #EFEFF0;
          .left, .right {
            @extend %flex-center;
            img {
              width: 24px;
              height: 24px;
            }
          }
          .left {
            span {
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(54, 61, 78, 1);
              line-height: 22px;
              margin-left: 8px;
            }
          }
          .right {
            span {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(167, 174, 188, 1);
              line-height: 20px;
              margin-right: 8px;
            }
          }
        }
        /deep/ .van-skeleton {
          padding: 16px 0 !important;
        }
        .site-list {
          padding-right: 16px;
          .path {
            padding: 16px 12px;
            margin-top: 16px;
            border-radius: 8px;
            border: 1px solid $theme-border-color;

            &-head {
              @extend %flex-items-center;

              img {
                width: 24px;
                height: 24px;
              }

              &-title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: bold;
                line-height: 22px;
                margin-right: 8px;
              }

              &-dsc {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: $theme-gray;
                line-height: 20px;
              }
            }

            &-content {
              width: 100%;
              margin-top: 16px;
              padding-bottom: 2px;

              &-item {
                padding: 2px 18px;
                border-radius: 4px;
                border: 1px solid $theme-border-color;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 20px;
                color: $theme-black;
                display: inline-block;
                margin-right: 4px;
              }
            }

            .one-line-hide {
              font-size: 14px;
              font-weight: bold;
              color: $theme-gray;
            }
          }
        }
        .no-data{
          margin-top: 16px;
          padding-right: 16px;
          img{
          }
        }
        .button{
          padding-right: 16px;
          margin-top: 16px;
        }
      }
    }

    .bottom {
      background: url("../assets/images/home/bottom.png");
      background-size: 100%, 100%;
      height: 124px;
      padding-top: 8px;

      p {
        width: 100%;
        text-align: center;
        height: 40px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $theme-gray;
        line-height: 20px;
      }
    }
  }
</style>
